<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">
                <a v-if="item.cover" class="image" href=":;" target="_blank">
                    <img :src="item.cover">
                </a>
                <div class="content" :class="{'content-image': item.cover}">
                    <router-link class="title" :to="`d/${item.id}`">
                        {{ item.title }}
                    </router-link>
                    <p class="abstract">{{ item.content }}</p>
                    <div class="meta">
                        <a class="name" target="_blank" href=":;">{{ item.name }}</a>
                        <a class="comment" target="_blank" href=":;">
                            <i class="icon-comment"></i>
                            <span>{{ formatNumber(item.commentNum) }}</span>
                        </a>
                        <a class="like" target="_blank" href=":;">
                            <i class="icon-like"></i>
                            <span>{{ formatNumber(item.likeNum) }}</span>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { formatNumber } from '../../assets/utils/format-number.ts'
export default {
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            formatNumber: formatNumber
        }
    }
}
</script>

<style lang="less" scoped>
ul {
    li{
        position: relative;
        min-height: 100px;
        padding: 15px 0 20px 0;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--color-border);
        .content {            
            .title {
                font-size: var(font-size-large);
                color: var(--color-text-p);
                margin-bottom: 4px;
                line-height: 1.5;
            }
            .abstract {
                margin-bottom: 8px;
                max-height: 60px;
                overflow: hidden;
                font-size: var(font-size-medium);
                color: var(--color-text-l);
                line-height: 1.5;
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: wrap; 
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
        .content-image {
            padding-right: 165px;;
        }
        .image {
            display: block;
            width: 150px;
            height: 100px;
            position: absolute;
            right: 0;
            top: 15px;
        }
        .meta {
            .clear-fix;
            > a {
                display: block;
                float: left;
                margin-right: 10px;
                font-size: var(font-size-medium);
                color: var(--color-text-l);
                &:hover {
                    color: var(--color-text-s);
                }
                > i {
                    margin-right: 5px;
                }
            }
        }
    }
    
}
</style>

